<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页轮播图</title>
<style>
 *{margin:0;padding:0;}
        
        .container{
            width: 590px;
            height: 470px;
            border:1px solid black;
            margin:20px auto;
            position: relative;
        }
        .item{
            width: 590px;
            height: 470px;
            background: url('./images/01.jpg');
            position: absolute;
            /* display */
            opacity:0;
            transition: all 1s;
        }
        /* first second third fourth fifth sixth numberth */
        .item:nth-child(2){
            background: url('./images/02.jpg');
        }
        .item:nth-child(3){
            background: url('./images/03.jpg');
        }
        .item:nth-child(4){
            background: url('./images/04.jpg');
        }
        .item:nth-child(5){
            background: url('./images/05.jpg');
        }
        .show{
            opacity: 1;
        }
        .btn-box{
            position:absolute;
            width:100%;
            top:0;
            bottom:0;
            margin:auto 0 ;
            height:50px;
            /* background-color: white; */
        }
        .left-btn,.right-btn{
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            color:#fff;
            text-align: center;
            line-height: 50px;
            font-size: 26px;
            cursor: pointer;
        }
        .right-btn{
            right:0;
        }

        .ctrl-box{
            position:absolute;
            width: 50%;
            height: 20px;
            background: rgba(0,0,0,0.5);
            bottom:10px;
            left:0;
            right:0;
            margin:0 auto;
            display:flex;
            justify-content: space-around;
            
        }
        .ctrl{
            width: 20px;
            height: 20px;
            border:2px solid #fff;
            border-radius: 50%;
        }
        .active{
            background:#fff;
        }
</style>
<script>
     // window.onload 和 DOMContentLoaded
        // window.onload：等待资源全部加载完毕
        // window.onload = function(){

        // };
        // DOMContentLoaded：等待DOM节点加载完成
        function $(ele){ return document.querySelector(ele) }
        
        function ready(){
            // 动画函数
            function animation(ope){
                for( let i=0;i<items.length;i++ ){
                    items[i].className = 'item';
                    ctrls[i].className = 'ctrl'
                }
                if(ope == 'next'){  //next：下一个。
                    if(index>=4){
                        index = 0;
                    }else{
                        index++;
                    }
                }else if(ope == 'prev'){ //prev:上一个。
                    if(index<=0){
                        index = 4;
                    }else{
                        index--;
                    }
                }
                items[index].className = 'item show';
                ctrls[index].className = 'ctrl active';
            }
            // 获取所有的item
            let items = document.getElementsByClassName('item');
            // 获取所有的ctrl
            let ctrls = document.getElementsByClassName('ctrl');
            // 设置定时器
            let timer = null;
            let index = 0;
            timer = setInterval(function(){ //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
                animation('next');
            },2000);

            // 当鼠标移入时清除定时器
            $('.container').onmouseenter = function(){
                clearInterval(timer); //Window.clearInterval() 从而取消对 code 的周期性执行的值。
            }
            // 当鼠标移出时重置定时器
            $('.container').onmouseleave = function(){
                timer = setInterval(function(){
                    animation('next');
                },2000);
            }

            // 当鼠标点击下一张 (right-btn)
            $('.right-btn').onclick = function(){
                animation('next');
            }
             // 当鼠标点击上一张 (right-btn)
             $('.left-btn').onclick = function(){
                animation('prev');
            }

            //为每一个ctrl点都绑定点击事件
            for( let i=0;i<ctrls.length;i++ ){
                ctrls[i].onclick = function(){
                    for( let k=0;k<items.length;k++ ){
                        items[k].className = 'item';
                        ctrls[k].className = 'ctrl'
                    }
                    index = i;
                    items[index].className = 'item show';
                    ctrls[index].className = 'ctrl active';
                }
            }
        }
        document.addEventListener('DOMContentLoaded',ready);

    // ctrls.addEventListener('DOMContentLoaded',function ready(e){
    //     console.log(e.target.innerText);
    // },false);
   



</script>
</head>
<body>
    <div class="container">
        <div class="item show"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="btn-box">
            <div class="left-btn">&lt;</div>
            <div class="right-btn">&gt;</div>
        </div>
        <div class="ctrl-box">
            <div class="ctrl active"></div>
            <div class="ctrl"></div>
            <div class="ctrl"></div>
            <div class="ctrl"></div>
            <div class="ctrl"></div>
        </div>
    </div>
</body>
</html>